<template>
    <div>
        <div v-for="item in posts" :key="item.id">
            <h1>{{ item.title }}</h1>
            <!-- <div v-html="item.content"></div> -->
        </div>
    </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex'
export default {
    name: 'posts',
    metaInfo: { title: 'posts' },
    data() {
        return { }
    },
    computed: {
        ...mapState('posts', ['posts'])
    },
    // vue-ssr 特殊为服务端渲染提供的一个生命周期的钩子函数，会在渲染之前调用
    serverPrefetch() {
        // 发起action，返回promise
        return this.getPosts()
    },
    mounted () { 
        if (!this.posts.length) { 
            this.getPosts()
        } 
    },
    methods: {
        ...mapActions('posts', ['getPosts']),
        ...mapMutations('posts', ['setPosts'])
    },
    beforeRouteLeave (to, from, next) { 
        this.setPosts([])
        next() 
    }
}
</script>

<style scoped></style>